<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上移下移03</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }
        
        table {
            width: 400px;
            line-height: 30px;
            margin: 0 auto;
            text-align: center;
        }
        
        table td {
            padding: 5px;
        }
        
        table,
        tr,
        td {
            border: 1px solid red;
        }
        
        input {
            padding: 0 5px;
        }
    </style>
</head>

<body>

    <body>
        <div id="box">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>爱好</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>小黑</td>
                    <td>20</td>
                    <td>男</td>
                    <td>计算机</td>
                    <td>
                        <input type="button" value="上移" onclick="setRowUp(this)" />
                        <input type="button" value="下移" onclick="setRowDown(this)" />
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>小白</td>
                    <td>18</td>
                    <td>男</td>
                    <td>唱歌</td>
                    <td>
                        <input type="button" value="上移" onclick="setRowUp(this)" />
                        <input type="button" value="下移" onclick="setRowDown(this)" />
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>小明</td>
                    <td>16</td>
                    <td>男</td>
                    <td>绘画</td>
                    <td>
                        <input type="button" value="上移" onclick="setRowUp(this)" />
                        <input type="button" value="下移" onclick="setRowDown(this)" />
                    </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>小红</td>
                    <td>17</td>
                    <td>女</td>
                    <td>唱歌</td>
                    <td>
                        <input type="button" value="上移" onclick="setRowUp(this)" />
                        <input type="button" value="下移" onclick="setRowDown(this)" />
                    </td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>小强</td>
                    <td>22</td>
                    <td>男</td>
                    <td>机械</td>
                    <td>
                        <input type="button" value="上移" onclick="setRowUp(this)" />
                        <input type="button" value="下移" onclick="setRowDown(this)" />
                    </td>
                </tr>
            </table>
        </div>
    </body>

    <script>
        //使行向上一行  上移
        function setRowUp(obj) {
            if (obj.parentNode.parentNode.rowIndex != 1) {
                var tab = obj.parentNode.parentNode.parentNode;
                var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;
                var nowNowIndex = obj.parentNode.parentNode.rowIndex;
                tab.deleteRow(nowNowIndex);
                var newHtml = "<table cellpadding=\"0\" cellspacing=\"0\">";
                newHtml += ("<TR>" + tab.rows[0].innerHTML + "</TR>");
                for (i = 1; i < tab.rows.length; i++) {
                    if (i == (nowNowIndex - 1)) {
                        newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");
                    }
                    newHtml += ("<TR>" + tab.rows[i].innerHTML + "</TR>");
                }
                newHtml += "</table>";
                document.getElementById("box").innerHTML = newHtml;
            }
        }
        //使行向下一行  下移
        function setRowDown(obj) {
            if (obj.parentNode.parentNode.rowIndex != (document.getElementById("box").childNodes[0].rows.length - 1)) {
                var tab = obj.parentNode.parentNode.parentNode;
                var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;
                var nowNowIndex = obj.parentNode.parentNode.rowIndex;
                tab.deleteRow(nowNowIndex);
                var newHtml = "<table cellpadding=\"0\" cellspacing=\"0\">";
                newHtml += ("<TR>" + tab.rows[0].innerHTML + "</TR>");
                for (i = 1; i < tab.rows.length; i++) {
                    if (i == (nowNowIndex + 1)) {
                        newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");
                    }
                    newHtml += ("<TR>" + tab.rows[i].innerHTML + "</TR>");
                }
                //向下可能到表格现有行数外 额外处理
                if (tab.rows.length == (nowNowIndex + 1)) {
                    newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");
                }
                newHtml += "</table>";
                document.getElementById("box").innerHTML = newHtml;
            }
        }
    </script>
</body>

</html>